<template>
    <view>
        <video
            id="vedioCtx"
            class="swiper-item-video"
            ref="vedioCtxRef"
            :src="url"
            :poster="poster"
            :muted="muted"
            :direction="0"
            :controls="fullScreen && showControl"
            :show-fullscreen-btn="false"
            :show-center-play-btn="false"
            :enable-progress-gesture="false"
            :style="style"
            @play="playState = 1"
            @pause="playEnd"
            @ended="playEnd"
            @timeupdate="timeupdate"
            @fullscreenchange="fullscreenchange"
        >
            <cover-view
                class="video-cover-view"
                @tap="videoTap"
                :style="{
                    width: $u.addUnit(systemInfo.screenWidth, 'px'),
                    height: coverHeight,
                    marginTop
                }"
                v-if="!fixed"
            >
                <!-- 全屏时 最小化 视频按钮 -->
                <view class="vedio-close-btn" v-if="$u.os() == 'ios'">
                    <view :style="{ height: systemInfo.safeAreaInsets.top + 'px' }"></view>
                    <text class="iconfont close-btn" v-if="fullScreen" @click.stop="exitFullScreen">&#xe685;</text>
                </view>
                <view class="center-btns">
                    <view v-if="showControl">
                        <!-- 播放按钮 -->
                        <text class="iconfont play-btn" :class="{ fullBtn: fullScreen }" v-if="playState === 0" @click.stop="playPause">&#xea82;</text>
                        <!-- 暂停按钮 -->
                        <text class="iconfont pause-btn" :class="{ fullBtn: fullScreen }" v-else @click.stop="playPause">&#xea81;</text>
                    </view>
                </view>
            </cover-view>
            <cover-view v-else>
                <view class="close-btn">
                    <text class="iconfont close-btn-t">&#xe8bb;</text>
                </view>
            </cover-view>
        </video>
        <!-- 静音 -->
        <view class="sound-btns" v-if="!fixed">
            <!-- 开启声音 -->
            <text class="iconfont muted-btn" v-if="muted" @click="changeMuted">&#xe642;</text>
            <!-- 静音 -->
            <text class="iconfont muted-btn" v-else @click="changeMuted">&#xe641;</text>
        </view>
        <!-- 自定义进度条 -->
        <view v-if="!fixed">
            <c-line-progress :percentage="percent" :showText="false" activeColor="#fa5077"></c-line-progress>
        </view>
        <video
            v-if="fixed && show"
            id="windowCtx"
            class="swiper-item-video-fixed"
            ref="windowCtx"
            :src="url"
            :poster="poster"
            :muted="muted"
            :direction="0"
            :controls="false"
            :show-fullscreen-btn="false"
            :show-center-play-btn="false"
            :enable-progress-gesture="false"
            :style="fixedStyle"
            @timeupdate="timeupdate"
        >
            <cover-view class="close-mask-btn">
                <text class="iconfont" @click="show = false">&#xe867;</text>
            </cover-view>
        </video>
    </view>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useGlobalStore } from '@/store'
interface Props {
    url: string
    poster?: string
    fixed?: boolean
}
withDefaults(defineProps<Props>(), {
    url: '',
    poster: '',
    fixed: false
})

const globalStore = useGlobalStore()

const muted = computed(() => {
    return globalStore.muted
})

/** 显示视频控制菜单 */
const showControl = ref(false)
/** 全屏播放 */
const fullScreen = ref(false)

/** 视频播放状态 */
const playState = ref(0)
/** 视频播放进度 百分比 控制进度条 */
const percent = ref(0)

/** 当前播放时间 */
const current = ref(0)

/** 视频总时长 */
const duration = ref(0)
/** 计时器 4s之后自动隐藏 操作栏 */
const timer = ref<any>(0)

/** 播放器的引用 */
const vedioCtxRef = ref<any>(null)

/** 显示小窗播放视频 */
const show = ref(false)

const systemInfo = computed<any>(() => {
    return uni.getSystemInfoSync()
})

const $u = computed(() => {
    return uni.$u
})

const style = computed(() => {
    return {
        width: systemInfo.value.screenWidth + 'px',
        height: systemInfo.value.screenWidth + 'px'
    }
})
/** 计算视频coverView的高度 */
const coverHeight = computed(() => {
    if (uni.$u.os() != 'ios') {
        if (fullScreen.value) {
            return systemInfo.value.screenHeight - systemInfo.value.statusBarHeight - 88 - systemInfo.value.safeAreaInsets.bottom + 'px'
        } else {
            return systemInfo.value.screenWidth - 88 + 'px'
        }
    } else {
        return fullScreen.value ? systemInfo.value.screenHeight + 'px' : systemInfo.value.screenWidth + 'px'
    }
})

const marginTop = computed(() => {
    if (uni.$u.os() != 'ios') {
        return fullScreen.value ? systemInfo.value.statusBarHeight + 44 + 'px' : '44px'
    } else {
        return 0
    }
})

const fixedStyle = computed(()=>{
    return {
        'width': systemInfo.value.screenWidth / 2 + 'px',
        'height': systemInfo.value.screenWidth / 2 + 'px',
        'right':'10px',
        'top': systemInfo.value.statusBarHeight + 54 + 'px'
    }
})
/** 播放结束时 */
const playEnd = function () {
    playState.value = 0
    showControl.value = true
}

const timeupdate = function (e: any) {
    if (!duration.value) duration.value = e.detail.duration
    percent.value = Math.ceil((e.detail.currentTime / e.detail.duration) * 100 + 2) //Number().toFixed(2)
    current.value = e.detail.currentTime
}

const fullscreenchange = function (e: any) {
    fullScreen.value = e.detail.fullScreen
}

/**
 * 点击视频 显示操作栏 或者关闭操作栏
 * 误操作4秒之后 隐藏操作栏
 *
 */
const videoTap = function () {
    // 1.非全屏状态下  如果视频未播放 点击播放视频
    if (playState.value === 0 && !fullScreen.value) {
        vedioCtxRef.value?.play()
        showControl.value = false
        return
    }
    // 2.全屏状态下 如果视频未播放  点击无响应
    if (playState.value === 0 && fullScreen.value) {
        showControl.value = true
        return
    }

    // 3.非全屏状态下 如果在播放 则显示全屏 并显示 操作栏  4秒之后 自动隐藏
    if (playState.value === 1 && !fullScreen.value) {
        fullScreen.value = true
        vedioCtxRef.value?.requestFullScreen({
            direction: '0'
        })
        showControl.value = true
        clearTimeout(timer.value)
        timer.value = setTimeout(() => {
            showControl.value = false
        }, 4000)
    }
    // 4. 全屏状态下  如果在播放 则 开关 操作栏
    if (playState.value === 1 && fullScreen.value) {
        showControl.value = !showControl.value

        if (showControl.value) {
            clearTimeout(timer.value)
            timer.value = setTimeout(() => {
                showControl.value = false
            }, 4000)
        }
    }
}
/** 关闭全屏播放 */
const exitFullScreen = function (e: any) {
    vedioCtxRef.value?.exitFullScreen()
    e.stopPropagation()
}

const playPause = function (e: any) {
    // 未播放
    if (playState.value === 0) {
        vedioCtxRef.value?.play()
        // 开始播放之后  隐藏操作栏
        showControl.value = false
    } else {
        vedioCtxRef.value?.pause()
        showControl.value = true
        if (timer.value) clearTimeout(timer.value)
    }
    e?.stopPropagation()
}
const changeMuted = function (e: any) {
    globalStore.muted = !globalStore.muted
    e.stopPropagation()
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
